<template>
  <el-menu
    :default-active="activeIndex"
    class="el-menu-vertical"
    @open="handleOpen"
    @close="handleClose">
    <el-menu-item @click="goto(item)" v-for="(item) in menuItemList" :index="item.key" :key="item.key">
      <i :class="item.icon"></i>
      <template #title>
        <span>{{item.title}}</span>
      </template>
    </el-menu-item>
  </el-menu>
</template>

<script>
  import {ref, watch} from "vue"
  import router from "../../../router"
  import {useRoute} from "vue-router";
  export default {
    name: "memberMenu",
    props: {
      active: {
        type: String,
        default: "learn-record"
      }
    },
    setup(props) {
      const route = useRoute()
      const menuItemList = [
        {
          key: "learn-record",
          title: "学习记录",
          icon: "el-icon-video-camera",
          url: "/member/learn-record"
        },
        {
          key: "favorites",
          title: "收藏",
          icon: "el-icon-star-off",
          url: "/member/favorites"
        },
        {
          key: "message",
          title: "私信",
          icon: "el-icon-chat-line-square",
          url: "/member/message"
        },
        {
          key: "personal",
          title: "个人信息",
          icon: "el-icon-user",
          url: "/member/personal"
        },
        {
          key: "setting",
          title: "设置",
          icon: "el-icon-setting",
          url: "/member/setting"
        },
        {
          key: "comment",
          title: "我的评论",
          icon: "el-icon-s-comment",
          url: "/member/comment"
        }
      ]
      const activeIndex = ref("learn-record")
      watch(() => route.fullPath, (nv) => {
        for (const item of menuItemList) {
          if (item.url === nv) {
            activeIndex.value = item.key;
          }
        }
      })
      const handleOpen = function(key, keyPath) {
        console.log(key, keyPath);
      }
      const handleClose = function(key, keyPath) {
        console.log(key, keyPath);
      }
      const goto = function(item) {
        activeIndex.value = item.key;
        router.push({path: item.url});
      }
      for (const item of menuItemList) {
        if (item.key === props.active) {
          activeIndex.value = item.key;
        }
      }
      return {
        menuItemList,
        activeIndex,
        handleOpen,
        handleClose,
        goto
      }
    }
  }
</script>

<style scoped>
  .el-menu-vertical {
    background-color: #f5f5f5!important;
    border: 0;
    margin: 20px 0 20px 20px;
    height: calc(100% - 40px);
  }
</style>
